<template>
    <div class="musiclist">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>

        <div class="musicContent">
            <van-swipe :loop="false" :width="120" class="my-swpid" :show-indicators="false">
            <van-swipe-item v-for="(item,index) in musicList" :key="index" class="my-sp" @click="ViewMusicList(item.id)">
                <div class="my-spsp">
               <!-- <router-link :to="{path:'/Yuncun', query:{id:item.id}}"> -->
                 <div class="theimg">
                <img :src="item.picUrl" alt="" class="auto-img">
                </div>
                <span class="playCount">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-play"> </use>    
            </svg>
            {{changeCount(item.playCount)}}
                </span>

                <p class="name"> {{item.name}}</p>
              </div>
             

            <!-- </router-link> -->

            </van-swipe-item>   
            </van-swipe>
            <hr>
        </div>

        <!-- <div class="musicContent">
            <van-swipe :loop="false" :width="300" class="my-swpid" :show-indicators="false" >
            <van-swipe-item v-for="item in musicList" :key=item>
                
                <router-link>
                <img :src="item.piUrl" alt="">
                <span class="playCount"> <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-a-zanting_huaban1"> </use>    
            </svg>
            {{item.playCount}}
          </span>
          <span class="name">{{item.name}} </span>
        
        </router-link>
            </van-swipe-item>
            </van-swipe>
         
        </div> -->
    </div>
</template>

<script>
  //此页面要带id跳转到ItemMusic.vue
import { mapMutations } from "vuex";
import {getMusicList} from "@/request/api/home.js"
import { reactive,onMounted } from "vue"; 
export default {
        //避免数据造成污染 
        //vue2写法
       data(){
         return{
            musicList:[]

         };
       },
       created(){
         this.MyMusicList()
       },

       methods:{
        ...mapMutations(["setIsMain"]),
    //    async getGnedan(){
    //       let res = await getMusicList()
    //       console.log(res);
    //       this.musicList=res.data.result
    //     },

        //获取数据
        MyMusicList(){
          this.axios({
            method:"get",
            url: '/personalized',
            params: { 
                limit: 10,
             },
          }).then(res => {
            this.musicList = res.data.result
            // console.log("res==>",res);
            // console.log("歌单推荐this.musicList==>",this.musicList);
          }).catch(err=> {
             console.log("err==>",err);
          })
        },
        
        ViewMusicList(id){
            this.setIsMain(false);
            this.$router.push({
                name:"ItemMusic",params:{id}
            });
        },


        //值千万 只保留一位小数
        changeCount:function (num) {
            if (num>=100000000) {
                return (num/100000000).toFixed(1)+"亿"
            }else if(num/10000){
               return (num/10000).toFixed(1)+"万"
            }

        }
        } ,


       //生命周期钩子
    //    mounted(){
    //      this.getGnedan()
    //    },

    //vue 的申请数据写法3
    // setup(){
    //   const state = reactive({
    //     musicList:[],
    //   });
    //   function changeCount(num) {
    //         if (num>=100000000) {
    //             return (num/100000000).toFixed(1)+"亿"
    //         }else if(num/10000){
    //            return (num/10000).toFixed(1)+"万"
    //         }

    //     }
    //   onMounted( async() => {
    //     let res = await getMusicList()
    //       console.log(res);
    //       state.musicList=res.data.result
    //   });
    // //   数据渲染的时候要加上这个前缀 state.什么
    // return {state,changeCount}
    // }
     
       
    }
</script>

<style lang="less" scoped>
  .musiclist{
    width: 100%;
   
    
    .musicTop{
        
        width: 100%;
        height: 0.6rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.2rem;
        .title{
            margin-left: 0.2rem;
            font-size: 0.4rem;
            font-weight: 900;

        }
        .more{
            border: 1px solid #ccc;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            margin-right: 0.2rem;
            border-radius: 0.4rem;
        }
    }
    .musicContent{
      width: 100%;
      hr{
        font-size: 5px;
        opacity: .7;
        margin: 0;
      }

    .my-swpid{
      position: relative;
      // padding: 0 12px;
     
      .my-sp{
        // margin: 0 12px 3px 0px;
        
      }
      .my-spsp{
        
        .theimg{
          width: 110px;
          height: 110px;
          border-radius: 10px;
            img{
              border-radius: 10px;
              width: 100%;
              display: block;
          }
        }
      }
      .playCount{
        display: flex;
        position: absolute;
        top: 3px;
        left: 5px;
        align-items: center;
        background-color: rgba(171, 173, 174, .2);
        border-radius: 20px;
        
      }
      .name{
        font-size: small;
        margin-top: 5px;
        margin-bottom: 15px;
      }
      // .my-spsp{
      //  margin: 0 6px;
      //  border-radius: 30px;
      //  .theimg{
      //    overflow: hidden;
      //    box-sizing: border-box;
      //    width: 150px;
      //    height: 150px;
      //    border-radius: 10px;
      //   img{
         
      //    width: 100%;
      //    display: block;
      //     }
      //   }
       
      // }
    }   
 }
  }
</style>